<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const scrolled = ref(0)

onMounted(() => {
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    scrolled.value = scrollTop
  })
})

function goTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
enum ShowIcon {
  '显示动画',
  '隐藏动画',
}
const showIcon = ref()

watch(() => scrolled.value, (o, n) => {
  if (n > 0) {
    if (n > 300)
      showIcon.value = ShowIcon.显示动画

    if (n < 300 && n > o)
      showIcon.value = ShowIcon.隐藏动画
  }
}, { deep: true })
</script>

<template>
  <div
    :class="{ show_style: showIcon === ShowIcon.显示动画, noneShow: showIcon === ShowIcon.隐藏动画 }"
    class="rounded-40px opacity-0 bg-blue-400 text-white z-4 w-50px h-50px flex justify-center items-center cursor-pointer fixed bottom-5 right-10"
    @click="goTop"
  >
    <div class="text-20px font-400 i-mynaui:fat-arrow-up" />
  </div>
</template>

<style>
.show_style {
  animation: move .3s linear forwards;
}

.noneShow {
  animation: goOut .3s linear forwards;
}

@keyframes goOut {
  0% {
    @apply opacity-100;
  }

  100% {
    transform: scale(0);
  }
}

@keyframes move {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    @apply opacity-100;
  }
}
</style>
